<template>
  <div class="forum hiddenScroll">
    <LayoutContainer>
      <div class="main">
        <div class="header">
          <div class="choose" v-if="currentIndex === '1'">
            <div v-for="(item, index) in type" :class="{ active: active === index }" @click="changeActive(item.active)">
              {{ item.title }}
            </div>
          </div>
          <Search></Search>
        </div>
        <div class="body">
          <el-container>
            <el-aside width="200px">
              <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :value="false">展开</el-radio-button>
                <el-radio-button :value="true">收起</el-radio-button>
              </el-radio-group>
              <el-menu :default-active="currentIndex" class="el-menu-vertical-demo" :collapse="isCollapse"
                @select="changeIndex">
                <el-menu-item index="1">
                  <el-icon>
                    <HomeFilled />
                  </el-icon>
                  <span>首页</span>
                </el-menu-item>
                <el-menu-item index="2" @click="$router.push('/forum/post')">
                  <el-icon>
                    <CirclePlus />
                  </el-icon>
                  <span>发布记录</span>
                </el-menu-item>
                <el-menu-item index="3" @click="initFavoritePosts">
                  <el-icon>
                    <Star />
                  </el-icon>
                  <span>我的收藏</span>
                </el-menu-item>
                <el-menu-item index="4" @click="initHistoryPosts">
                  <el-icon>
                    <View />
                  </el-icon>
                  <span>历史记录</span>
                </el-menu-item>
              </el-menu>
            </el-aside>
            <el-main style="width: 1250px; min-height: 600px">
              <div class="home" v-show="currentIndex === '1'">
                <Waterfall v-if="posts.length !== 0" style="min-height: 1200px" :list="posts" :breakpoints="breakpoints"
                  backgroundColor="#f5faf6">
                  <template #default="{ item, url, index }">
                    <div class="card-container" v-if="posts">
                      <Card :key="item.id" :obj="item" @getDetail="openDetails" />
                    </div>
                  </template>
                </Waterfall>
                <el-divider v-if="posts.length !== 0"></el-divider>
                <el-empty :image-size="200" v-else />
              </div>
              <div class="favorite" v-show="currentIndex === '3'">
                <Waterfall v-if="favoritePosts.length !== 0" style="height: 1200px" :list="favoritePosts"
                  :breakpoints="breakpoints" backgroundColor="#f5faf6">
                  <template #default="{ item, url, index }">
                    <div class="card-container" v-if="favoritePosts">
                      <Card :key="item.id" :obj="item" @getDetail="openDetails" />
                    </div>
                  </template>
                </Waterfall>
                <el-divider v-if="favoritePosts.length !== 0"></el-divider>
                <el-empty :image-size="200" description="没有更多记录" v-else />
              </div>
              <div class="history" v-show="currentIndex === '4'">
                <Waterfall v-if="historyPosts.length !== 0" style="height: 1200px" :list="historyPosts"
                  :breakpoints="breakpoints" backgroundColor="#f5faf6">
                  <template #default="{ item, url, index }">
                    <div class="card-container" v-if="historyPosts">
                      <Card :key="item.id" :obj="item" @getDetail="openDetails" />
                    </div>
                  </template>
                </Waterfall>
                <el-divider v-if="historyPosts.length !== 0"></el-divider>
                <el-empty :image-size="200" description="没有更多记录" v-else />
              </div>
            </el-main>
          </el-container>
        </div>
      </div>
    </LayoutContainer>
  </div>
  <Details v-if="detailVisible" :id="clickId" @close="detailVisible = false"></Details>
</template>

<script setup>
import LayoutContainer from '@/layout/LayoutContainer.vue'
import { Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { getHistory, getPosts } from '@/api/forum'
import Card from '@/views/Forum/components/Card.vue'
import Search from '@/components/Search.vue'
import Details from './components/Details.vue'
import { ref } from 'vue'
import { startLoading, stopLoading } from '@/utils/loading'
import { useUserStore } from '@/stores'

const useStore = useUserStore()

// 当前选中
const active = ref(0)

const type = [
  {
    title: '推荐',
    active: 0,
  },
  {
    title: '热度较高',
    active: 1,
  },
  {
    title: '最新发布',
    active: 2,
  },
]

// 更改选中
const changeActive = (index) => {
  active.value = index
  initPosts()
}

// 侧栏菜单
const currentIndex = ref('1')

// 更改侧栏菜单
const changeIndex = (index) => {
  currentIndex.value = index
}

// 是否展开侧栏
const isCollapse = ref(false)

const breakpoints = {
  9999: { rowPerView: 4 },
  1200: { rowPerView: 3 },
  800: { rowPerView: 2 },
  500: { rowPerView: 1 },
}

// 记录列表
const posts = ref([])

const initPosts = async () => {
  startLoading()
  const {
    data: { data },
  } = await getPosts(active.value, false)
  stopLoading()
  posts.value = data ? data : []
}

initPosts()

// 收藏列表
const favoritePosts = ref([])

const initFavoritePosts = async () => {
  startLoading()
  const {
    data: { data },
  } = await getPosts(0, true)
  stopLoading()
  favoritePosts.value = data ? data : []
}

initFavoritePosts()

// 历史记录
const historyPosts = ref([])

// 获取历史记录
const initHistoryPosts = async () => {
  if (!useStore.getAccessToken()) {
    return
  }
  startLoading()
  const { data } = (await getHistory()).data
  stopLoading()
  historyPosts.value = data ? data : []
}

initHistoryPosts()

// 详细页
const detailVisible = ref(false)

// 点击记录id
const clickId = ref()

// 打开详细页
const openDetails = (id) => {
  detailVisible.value = true
  clickId.value = id
}
</script>

<style scoped less="scss">
.forum {
  .layout-container {
    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      width: 100vw;
      margin-top: 10px;
      background-color: #f5faf6;

      .header {
        display: flex;
        justify-content: space-around;

        width: 90%;

        .choose {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;

          z-index: 5;
          width: 300px;

          div {
            padding-top: 30px;
            margin-bottom: -10px;
            cursor: pointer;
            transition: all 0.1s;
            box-sizing: border-box;
          }

          div:hover {
            color: rgb(64, 158, 255);
          }

          .active {
            border-bottom: 3px solid rgb(64, 158, 255);
          }
        }
      }

      .el-container {
        display: flex;
        justify-content: start;

        .el-aside {
          background-color: #f5faf6;
        }
      }
    }

    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      gap: 1%;
      /* 调整组件之间的间距 */
      width: 100%;
      height: auto;
    }
  }
}
</style>
